<template>
	<view>
		<view style="display: flex; justify-content: space-around; align-items: center;">
			<view :class="['redbag',item.receive?'opacitys':'']" v-for="(item,index) in redbglist" :key="index" @click="receivebag(index)">
				<view class="bag">
					<image v-if="item.rand" class="random" src="../../static/image/random-right.png" mode="aspectFill"></image>
					<image class="open" src="../../static/image/open-icon.png" mode="aspectFill"></image>
					<view class="redbaginfo">
						<view class="prizeinfo" v-if="item.rand">
							<view class="tips">最高</view>
							<view class="bigfonts">￥{{item.amount}}</view>
						</view>
						<view v-else class="generalbag">
							<view class="bigfonts">￥{{item.amount}}</view>
						</view>
						<view>{{item.consume}}金币</view>
					</view>
				</view>
				<view class="liang">每天限量{{item.count}}个</view>
			</view>
		</view>
		<!--提示框-->
		<alert :visible="visibletip" :modeltitle="modeltitle">
			<view class="jointips">
				{{bagtipinfo}}
				<view class="joinlottery" @tap="gotoindex">{{buttonguid}}</view>
			</view>
		</alert>
		<!--红包弹窗-->
		<firstredbg :maintitle="firstredbginfo.maintitle"  :subtitle="firstredbginfo.subtitle" :maxamount="firstredbginfo.maxamount"
		 :jointip="firstredbginfo.jointip" :redbagvisible="redbagvisible" :navcash="navcash" :redbagobject="redbagobject" @getdayredbag="getdayredbag" @refrechmember="refrechmember"></firstredbg>
	</view>
</template>

<script>
	/** 
	 * 限量红包
	 */
	export default {
		data() {
			return {
				redbglist: '',
				visibletip: false, //弹出提示内容
				navcash: true, //是否前往提现
				redbagvisible: false, //是否弹出红包
				bagschedule: '', //当前红包进度
				firstredbginfo: {
					subtitle: '兑换每日随机红包',
					maxamount: 1.88,
					jointip: '每天参与抽奖可获得更多红包',
					maintitle:'活动抽奖'
				},
				modeltitle: '参与抽奖领红包',
				bagtipinfo: '',
				buttonguid: '去参与',
				redbagobject:{},//红包对象
				canReceive:0,//一天只能领一个红包
				
			}
		},
		created() {
			uni.$on("closewindown", (option) => {
				this.visibletip = option
				this.redbagvisible = option
			})
		},
		methods: {
			//刷新用户信息
			refrechmember(){
				this.$emit('getmember');
			},
			
			//进入首页
			gotoindex() {
				this.visibletip = false;
				setTimeout(()=>{
					uni.switchTab({
						url: "/pages/index/index",
					})
				},800)
				
			},
			//用户领取红包
			receivebag(index) {
				//判断是否需要登陆
				if(this.$Logintip()){
					this.$Userlogin()
					return
				}
				let redbagdata = this.redbglist[index];
				//console.log(redbagdata); 
				//今日红包是否已领取
				if(redbagdata.receive){
					this.$ShowMsg('您已经兑换过此红包了！')
					return;
				}
				//每日只领取一次商品或红包
				if(!this.canReceive){
					this.$ShowMsg('每天只能兑换一次商品或红包哦~')					return;
				}
			
				let userinfo = uni.getStorageSync('user_info');
				//用户按条件领取红包
				if (redbagdata.rand) {
					//console.log(userinfo.integral,redbagdata.consume);
					if(parseInt(userinfo.integral)< parseInt(redbagdata.consumeNum)){
						this.$ShowMsg('您的金币不足，你可参与签到或抽奖获得~')
						return;
					}
					//领取随机红包
					this.randredbag(redbagdata);
				} else {
					//金币兑换红包
					
					if (parseInt(userinfo.integral) >= parseInt(redbagdata.consumeNum)) {
						this.firstredbginfo.maintitle = '消耗'+redbagdata.consumeNum+'金币';
						this.firstredbginfo.subtitle = '兑换每日现金红包';
						this.redbagobject = redbagdata; //传入当前红包数据
						this.redbagvisible = true;
					} else {
						//金币不足提示
						let difference = redbagdata.consumeNum - userinfo.integral;
						let getamount = redbagdata.amount;
						this.modeltitle = "金币不足",
						this.bagtipinfo =`当前还差${difference}即可获得${getamount}元现金红包`;
						this.buttonguid = "获取更多金币";
						this.visibletip = true;
					}
				}
			},
			//是否为随机红包领取
			randredbag(object) {
				//查看用户完成抽奖次数进度
				this.$HttRequest({
					url: '/redEnvelope/schedule',
					param: ''
				}).then((res) => {
					if (res.status === 10000) {
						//res.data.count//配置抽奖成功次数
						//console.log(res.data,object); 
						if (res.data.count >= object.lottery_count) {
							//传入当前要开启的红包对象
							this.firstredbginfo.maintitle = '消耗'+parseInt(object.consume)+'金币';
							this.firstredbginfo.subtitle = '兑换每日随机红包';
							object.icon = 'rand';
							//console.log(object)
							this.redbagobject = object;
							this.redbagvisible = true;							
						} else {
							let shenyu = object.lottery_count-res.data.count;
							this.bagtipinfo ='每天参与'+object.lottery_count+'个抽奖即可兑换随机红包~今日已参与'+res.data.count+'个抽奖，还需要参与'+shenyu+'个'
							this.visibletip = true;
						}
					} else {
						this.$ShowMsg(res.message)
					}
				}).catch((error) => {
					//异常错误
					this.$ShowMsg('statusCode：' + error.errMsg);
				})
			},

			//获取红包数据
			getdayredbag() {
				this.$HttRequest({
					url: '/redEnvelope/lists',
					param: ''
				}).then((res) => {
					if (res.status === 10000) {
						//console.log(res); 
						this.redbglist = res.data.list;
						this.canReceive = res.data.canReceive;
					} else {
						this.$ShowMsg(res.message)
						console.log(res.message)
					}
				}).catch((error) => {
					//异常错误
					this.$ShowMsg('statusCode：' + error.errMsg);
				});
			}
		}
	}
</script>

<style lang="scss">
	.opacitys {
		opacity: 0.5;
	}

	.jointips {
		font-size: 28rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;

		.joinlottery {
			color: #fff;
			width: 90%;
			height: 90rpx;
			font-size: 30rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			background-color: #02c867;
			border-radius: 40rpx;
			margin: 40rpx auto;
			margin-bottom: 20rpx;
		}
	}

	.redbaginfo {
		font-weight: bold;
		margin-top: 95rpx;
		color: #ffd5a5;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		font-size: 18rpx;

		.generalbag {
			width: 80%;
			margin-top: 8rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			.bigfonts {
				font-size: 30rpx;
			}
		}

		.prizeinfo {
			width: 80%;
			margin-bottom: 8rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.bigfonts {
				font-size: 30rpx;
			}

			.tips {

				font-weight: normal;
				font-size: 12rpx;
				background-color: #c94e3f;
				width: 20rpx;
				border-radius: 5rpx;
				height: 40rpx;
				text-align: center;
				line-height: 20rpx;

			}
		}

	}

	.liang {
		font-size: 20rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 10rpx 0;
	}

	.redbag {
		display: flex;
		flex-direction: column;
		width: 150rpx;
	}

	.random {
		width: 50rpx;
		height: 50rpx;
		position: absolute;
		top: 0;
		right: 0;
		z-index: 11;
	}

	.open {
		width: 65rpx;
		height: 65rpx;
		position: absolute;
		top: 35rpx;
		left: 45rpx;
		z-index: 11;
	}

	.bag {
		width: 150rpx;
		height: 180rpx;
		background-color: #ea5750;
		border-radius: 15rpx;
		position: relative;
	}

	.bag::after {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		border-radius: 15rpx 15rpx 70% 70%;
		height: 60rpx;
		content: '';
		background-color: #ed625d;
	}
</style>
